<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="joda" uri="http://www.joda.org/joda/time/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>预约考试</title>
<%@ include file="/WEB-INF/layouts/comm/datatables.jsp"%>
<%@ include file="/WEB-INF/layouts/comm/kindeditor.jsp"%>
<%@ include file="/WEB-INF/layouts/comm/form.jsp"%>
</head>
<body>
	<div class="mod_header">
		<div class="title">
			<h2 id="h_title">预约考试</h2>
		</div>
	</div>
	<ol class="breadcrumb">
		<li><a href="#">功能设置</a></li>
		<li><a href="${ctx}/webCustomer/exam/index">预约考试</a></li>
		<li class="active">预约考试报名</li>

	</ol>
	<div class="mod_basic">
		<div class="title">
			<h3>预约考试报名</h3>
			<div class="tabs" id="div_item_tabs">
				<a id="tab_1" href="javascript:changeType('tab_1');" class="current">报名信息</a>
				<a id="tab_2" href="javascript:changeType('tab_2');" class="">考试信息</a>
			</div>
		</div>

		<div class="content">
			<div id="examItem_content">
				<div class="sub_content_table_tool">
					<div class="sub_header">
						<div class="sub_bar">
							<form class="form-inline">
								<div class="form-group">
									<label for="exampleInputName2">开放时间：</label> <select
										class="form-control" name="openHours" id="s_openHours"
										onchange="openHoursChange()">
										<option value="">全部</option>
										<c:forEach var="openHours" items="${exam_openHours}"
											varStatus="status">
											<option value="${openHours}">${openHours}</option>
										</c:forEach>
									</select>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="sub_content_table">
					<table
						class="table table-striped table-bordered table-hover datatable"
						id="datatable">
						<thead>
							<tr>
								<th>考试标题</th>
								<th>考试日期</th>
								<th>考试开放时间</th>
								<th>学员姓名</th>
								<th>联系电话</th>
								<th>报名时间</th>
								<th>车型</th>
								<th>学员绑定编号</th>
								<th>操作</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div id="exam_content" style="display: none;">

				<div class="mod_notice" id="notice">
					<div class="content">
						<div class="info_logo">
							<i class="icon_info"></i>
						</div>
						<div class="info_content">
							<p>由于预约考试信息的更新会影响会员的报名信息，所以只可对标题、以及内容进行修改。</p>
						</div>
					</div>
				</div>
				<div class="sub_content">
					<form class="form-horizontal" id="exam_form" method="post"
						action="${ctx}/webCustomer/exam/update">
						<input type="hidden" name="id" value="${exam.id }" />
						<div class="form-group">
							<label for="examTime" class="col-sm-2 control-label">考试日期</label>
							<div class="col-sm-10">
								<p class="form-control-static">
									<joda:format value="${exam.examTime}" pattern="yyyy-MM-dd" />
								</p>
							</div>
						</div>
						<div class="form-group">
							<label for="resTime" class="col-sm-2 control-label">报名截至时间</label>
							<div class="col-sm-10">
								<p class="form-control-static">
									<joda:format value="${exam.resTime}"
										pattern="yyyy-MM-dd HH:mm:ss" />
								</p>
							</div>
						</div>
						<div class="form-group">
							<label for="title" class="col-sm-2 control-label">标题</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="title" name="title"
									value="${exam.title}">
							</div>
						</div>
						<div class="form-group">
							<label for="openHours" class="col-sm-2 control-label">考试开放时间</label>
							<div class="col-sm-10">
								<p class="form-control-static">${exam.openHours}</p>
							</div>
						</div>
							<div class="form-group">
						<label for="title" class="col-sm-2 control-label">每时段最大报名数</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="joinNo" name="joinNo" value="${exam.joinNo}">
						</div>
					</div>
						<div class="form-group">
							<label for="escontent" class="col-sm-2 control-label">内容</label>
							<div class="col-sm-10">
								<textarea name="content" id="edit_content"
									style="width: 100%; height: 400px;">${exam.content}</textarea>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="submit" class="btn btn-primary">保存</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<footer_body> <script id="tpl"
		type="text/x-handlebars-template">
	    {{#each func}}
	    <button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>
	    {{/each}}
	</script>
	<script>
		var tpl = $("#tpl").html();
		//预编译模板
		var template = Handlebars.compile(tpl);

		base.menu.active('menu_203');
		base.kindeditor.init('${ctx}', '#edit_content');

		var table = base.datatable
				.table({
					tableid : '#datatable',
					aoColumns : [ {
						"data" : "examTitle"
					}, {
						"data" : "examTime"
					}, {
						"data" : "openHours"
					}, {
						"data" : "studentName"
					}, {
						"data" : "contactNumberF"
					}, {
						"data" : "joinTime"
					}, {
						"data" : "carType"
					}, {
						"data" : "studentKey"
					}, {
						"data" : "id"
					} ],
					columnDefs : [ {
						targets : 8,
						render : function(a, b, c, d) {
							var context = {
								func : [
										{
											"name" : "删除",
											"fn" : "del(" + c.id + ",'"
													+ c.studentName + "')",
											"type" : "default"
										} ]
							};
							var html = template(context);
							return html;
						}
					} ],
					fnServerParams : function(aoData) {
						aoData.examId = '${exam.id}';
						aoData.openHours = $('#s_openHours').val();

					},
					url : "${ctx}/webCustomer/examItem/data?rand="
							+ Math.random()
				});

		function openHoursChange() {
			base.datatable.reloadAjax({
				url : "${ctx}/webCustomer/examItem/data?rand=" + Math.random()
			});
		}
		base.form.validation("#exam_form", {
			rules : {
				title : {
					required : true
				},
				joinNo : {
					required : true,
					maxlength:100,
					digits : true
				},
				content : {
					required : true
				}
			},
			ignore : ""
		});
		base.form.ajaxSubmit({
			formid : '#exam_form',
			cbfun : function(data) {
				if (data.data == true) {
					BootstrapDialog.alert({
						message : "修改成功"
					});
				} else {
					BootstrapDialog.alert("保存失败，请重试");
				}
			}
		});

		var _tabid = "tab_1";
		function changeType(tabid) {
			if (_tabid != tabid) {
				$('#exam_content').toggle();
				$('#examItem_content').toggle();
				$('.tabs a').removeClass('current');
				$('#' + tabid).addClass('current');
				_tabid = tabid;
			}

		}
		
		function del(id, name) {
			base.dialog
					.confirm({
						msg : "是否要删除[" + name + "]的报名信息",
						callback : function(result) {
							if (result) {
								base.ajax
										.get({
											url : '${ctx}/webCustomer/examItem/del?id='
													+ id,
											success : function(json) {
												if (json.data == true) {
													base.dialog
															.alert({
																msg : "删除成功",
																callback : function() {
																	base.datatable
																			.reloadAjax({
																				url : "${ctx}/webCustomer/examItem/data?rand="
																						+ Math
																								.random()
																			});
																}
															});
												} else {
													base.dialog.alert({
														title : '错误',
														msg : "系统错误"
													});
												}
											}
										});
							}
						}
					});
		}
	</script> </footer_body>
</body>
</html>